<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title></title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
            color: #409EFF;
        }

        #app {
            height: 100vh;
        }

        .el-container {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            height="100vh">
        <el-menu-item index="1"><a href="../index.html">小萌神点菜系统主页</a></el-menu-item>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">个人信息管理</template>
            <el-menu-item index="2-1">查看个人信息</el-menu-item>
            <el-menu-item index="2-2">修改密码</el-menu-item>
            <el-menu-item index="2-3">注销账号</el-menu-item>
        </el-submenu>
        <el-menu-item index="4"><a href="../adminiLogin.html">返回登陆</a></el-menu-item>
    </el-menu>
    <el-container style="height: 100vh; border: 1px solid #eee">

        <!--        右边导航栏-->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-food"></i>菜谱管理</template>
                    <el-menu-item-group>
                        <!--            标题可以写在标签里，也可以用 title表示-->
                        <el-menu-item index="1-1" @click="showAddFlag()">添加菜谱</el-menu-item>
                        <el-menu-item index="1-2" @click="showPutFlag()">菜谱上架</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-phone"></i>订单管理</template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1" @Click="showOrderFlag()">查看当前订单</el-menu-item>
                        <el-menu-item index="2-2" @Click="showHistoryFlag()">历史订单记录</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-s-marketing"></i>统计</template>
                    <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <!--    菜谱信息浏览界面-->
        <el-container v-show="putAwayFlag">
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>
            <el-main>
                <el-row class="demo-autocomplete">
                    <el-col :span="12">
                        <div class="sub-title">激活即列出输入建议</div>
                        <el-autocomplete
                                class="inline-input"
                                v-model="state1"
                                :fetch-suggestions="querySearch"
                                placeholder="请输入内容"
                                @select="handleSelect"
                        ></el-autocomplete>
                    </el-col>
                </el-row>
                <el-table :data="tableData">
                    <el-table-column prop="fid" label="编号" width="60">
                    </el-table-column>
                    <el-table-column prop="fname" label="菜名" width="120">
                    </el-table-column>
                    <el-table-column prop="normprice" label="原价" width="90">
                    </el-table-column>
                    <el-table-column prop="realprice" label="现价" width="90">
                    </el-table-column>
                    <el-table-column prop="detail" label="描述" width="140">
                    </el-table-column>
                    <el-table-column label="操作" width="70">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="showFood(scope.row.fid)">编辑
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="70">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="open(scope.row.fid, scope.$index,tableData)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>


        <!--        添加菜谱-->
        <el-container v-show="addFoodFlag">
            <el-form ref="food_rule" :model="food_rule" :rules='rules' label-width="80px">
                <el-form-item label="新菜名称" prop="name">
                    <el-input v-model="food_rule.name" placeholder="请输入菜谱名"></el-input>
                </el-form-item>
                <el-form-item label="菜谱描述" prop="detail">
                    <el-input type="textarea" v-model="food_rule.detail" placeholder="请输入菜谱描述"></el-input>
                </el-form-item>
                <el-form-item label="原价" prop="normal_price">
                    <el-input v-model.number="food_rule.normal_price"></el-input>
                </el-form-item>
                <el-form-item label="现价" prop="real_price">
                    <el-input v-model.number="food_rule.real_price"></el-input>
                </el-form-item>
                <el-form-item>
                    <label for="fphoto">菜品图</label>
                    <input type="file" class="form-control" id="fphoto" placeholder="新菜品名">
                </el-form-item>
                <el-form-item>
                    <el-button :plain="true" @click="addNewFood">添加</el-button>
                </el-form-item>
            </el-form>
        </el-container>

        <!--订单信息浏览界面-->
        <el-container v-show="orderFlag">
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>
            <el-main>
                <el-table :data="orderData">
                    <el-table-column prop="roid" label="订单编号" width="100">
                    </el-table-column>
                    <el-table-column prop="userid" label="用户编号" width="100">
                    </el-table-column>
                    <el-table-column prop="address" label="地址" width="120">
                    </el-table-column>
                    <el-table-column prop="tel" label="联系电话" width="150">
                    </el-table-column>
                    <el-table-column prop="ordertime" label="下单时间" width="140">
                    </el-table-column>
                    <el-table-column prop="delivertime" label="发货时间" width="140">
                    </el-table-column>
                    <el-table-column prop="ps" label="备注" width="140">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="140">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>


        <el-drawer
                title="修改当前菜谱 !"
                :before-close="handleClose"
                :visible.sync="dialog"
                direction="rtl"
                custom-class="demo-drawer"
                ref="drawer"
        >
            <div class="demo-drawer__content">
                <el-form ref="formdata" :model="formdata" label-width="80px">
                    <el-form-item label="新菜名称" prop="name">
                        <el-input v-model="formdata.fname" placeholder="请输入菜谱名" disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="菜谱描述" prop="detail">
                        <el-input type="textarea" v-model="formdata.detail" placeholder="请输入菜谱描述"></el-input>
                    </el-form-item>
                    <el-form-item label="原价" prop="normal_price" >
                        <el-input v-model.number="formdata.mormprice" disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="现价" prop="real_price">
                        <el-input v-model.number="formdata.realprice"></el-input>
                    </el-form-item>
                    <el-form-item prop="fphoto">
                        <el-upload
                                class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                :file-list= formdata.fphoto
                                list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                </div>
            </div>
        </el-drawer>

    </el-container>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [],
            formdata: {
                fname: '',
                mormprice: '',
                realprice: '',
                detail: "",
                fphoto: ""
            },
            food_rule: {
                name: '',
                normal_price: '',
                real_price: '',
                detail: "",
            },
            rules: {
                name: [
                    {required: true, message: '请输入菜谱名字', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                normal_price: [{required: true, message: '请输入原价', trigger: 'blur'}
                ],
                real_price: [{required: true, message: '请输入现价', trigger: 'blur'}],
                detail: [{required: true, message: '请输入菜谱描述', trigger: 'blur'},
                    {min: 3, message: '请至少输入3个字符', trigger: 'blur'}
                ]
            },

            // 提交规则，用于添加菜谱
            addFoodFlag: false,
            putAwayFlag: false,
            orderFlag: false,
            orderHistoryFlag: false,
            orderData: [],
            table: false,
            dialog: false,
            loading: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '80px',
            timer: null,
        },
        methods: {
            showFood: function (fid) {
                axios.get("../resfood/findById/"+fid).then(res => {
                    this.tableData = res.data.msg.map(item => ({
                        ...item,
                        status: false // Initialize 'status' to false for each item
                    }))
                })
            },
            handleClose(done) {
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => {});
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            closeAll: function () {
                this.addFoodFlag = false;
                this.putAwayFlag = false;
                this.orderFlag = false;
                this.orderHistoryFlag = false;
            },
            showAddFlag: function () {
                this.closeAll()
                this.addFoodFlag = true;
            },
            showPutFlag: function () {
                this.closeAll()
                this.putAwayFlag = true;
                this.showFoods();
            },
            showOrderFlag: function () {
                this.closeAll();
                this.orderFlag = true
                this.showOrders()
            },
            showHistoryFlag: function () {
                this.closeAll();
                this.orderHistoryFlag = true
            },
            addNewFood: function () {
                // 提交方式必须为post,指定Content-type：multipart/form-data
                var fphoto = document.querySelector("#fphoto").files[0];
                var formdata = new FormData();
                formdata.append("fname", this.food_rule.name)
                formdata.append("normprice", this.food_rule.normal_price)
                formdata.append("realprice", this.food_rule.real_price)
                formdata.append("detail", this.food_rule.detail);
                formdata.append("fphoto", fphoto)
                const config = {
                    headers: {"Content-Type": "multipart/form-data"}
                };
                axios({
                    url: "../backResfood/addNewFood",
                    method: "post",
                    hearders: config.headers,
                    data: formdata,
                }).then(res => {
                    if (res.data.data !== null) {
                        this.$message({
                            showClose: true,
                            message: '上传成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: '上传失败,请检查后再试',
                            type: 'error'
                        });
                    }
                }).catch(error => {
                    console.error(error);
                    this.$message({
                        showClose: true,
                        message: '上传失败',
                        type: 'error'
                    });
                })

            },
            showFoods() {
                axios.get("../backResfood/findAll").then(res => {
                    if (res.data.code === 200) {
                        this.tableData = res.data.msg;
                    } else {
                        // Handle error, show message, etc.
                        console.error('Error fetching data:', res.data.msg);
                    }
                }).catch(error => {
                    console.error('Error:', error);
                });
            },
            showOrders: function () {
                axios.get("../backorder/allOrder").then(res => {
                    if (res.data.code === 200) {
                        this.orderData = res.data.data;
                    } else {
                        // Handle error, show message, etc.
                        console.error('Error fetching data:', res.data.msg);
                    }
                }).catch(error => {
                    console.error('Error:', error);
                });
            },
            open: function (fid,index,rows) {
                this.$confirm('此操作将删除菜谱,但是不会影响已有的相关记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    rows.splice(index, 1);
                    axios.post("../backResfood/del?fid="+fid).then(res=>{
                       var result=res.data;
                       if(result.code===200){
                           this.$message({
                               type: 'success',
                               message: '删除成功!'
                           });
                       }else {
                           this.$message({
                               type: 'error',
                               message: '删除失败!'
                           });
                       }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            }
        }
    })
</script>
</html>